<template>
	<view class="searchresult">
		<view class="searchresult_header">
			<uni-search-bar @confirm="search(searchValue)" :focus="true" v-model="searchValue" @blur="blur"
				@focus="focus" @input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view>

		<view class="searchresult_body">
			<ul class="uls">
				<li v-for="(item,index) in searchList" @click="details(item)">
					<view class="search_connet">
						<img lazy-load :src="item.pic" alt="" class="imgs">
						<view class="view_box">
							<p style="margin-top: 5px;">{{item.prodName}}</p>
							<p style="color: #cbcbcb; font-size: 12px; margin-top: 10px;">
								<span>{{item.positiveRating}}评价</span><span>{{item.praiseNumber}}%好评</span>
							</p>
							<p style="color: red; font-size: 16px; margin-top: 10px;">￥{{item.price}}.00</p>
						</view>
					</view>

				</li>

			</ul>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				searchList: [],
			}
		},
		onLoad(option) {
			this.search()
			if (option.searchKey) {
				this.searchValue = option.searchKey
			} else {
				this.searchValue = option.item
			}

		},
		methods: {
			details(item) {
				console.log(item.prodId);
				uni.navigateTo({
					url: "/pages/component/details/details?item=" + encodeURIComponent(JSON.stringify(item
						.prodId))
				})
			},
			search() {

				uni.request({
					url: `https://yami-mini-api.yiluxdeng.com/search/searchProdPage?current=1&prodName=${this.searchValue}&size=10&sort=0`,
					method: "GET",

				}).then(res => {
					// console.log(res.data);
					// res.data.records.forEach((item, index) => {
					// 	if (item.prodName.includes(this.searchValue)) {
					// 		this.searchList.push(item)
					// 		console.log(item);

					// 	}
					// })
					// console.log(this.searchValue);
					this.searchList = res.data.records.filter(item => item.prodName.includes(this.searchValue));
				})

			},
		}
	}
</script>

<style lang="scss">
	.searchresult {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.searchresult_header {
			width: 100%;
			height: 50px;

		}

		.searchresult_body {
			flex: 1;
			overflow-y: scroll;
			margin-top: 20rpx;
			margin-left: 20rpx;
			background-color: #eee;




			.uls {
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;

				li {
					width: 95%;
					background-color: #fff;
					border-radius: 30rpx;
				}

				.search_connet {
					display: flex;
					width: 720rpx;
					height: auto;
					background-color: #fff;
					margin-top: 20rpx;


					.imgs {
						width: 250rpx;
						height: 200rpx;
					}

					.view_box {
						width: 100%;
						display: flex;
						flex-direction: column;
						padding-left: 20rpx;

					}
				}
			}
		}
	}
</style>
